<template>
  <view class="cart-page">
    <!-- 购物车商品列表 -->
    <view class="cart-list">
      <view class="cart-item" v-for="item in cartList" :key="item.id">
        <!-- 商品选择框 -->
       <view class="item-checkbox">
          <checkbox checked=true @change="toggleItemSelection(item.id)" />
        </view>
        <!-- 商品图片 -->
       <view class="item-image">
          <image :src="item.product.coverImage" mode="aspectFit" />
        </view>
        <!-- 商品信息 -->
        <view class="item-info">
          <text class="item-name">{{ item.product.name }}</text>
          <text class="item-price">￥{{ item.price }}</text>
          <!-- 商品数量控制 -->
          <view class="quantity-control">
            <button @click="jiaoshao(item.id,item.price)" :disabled="item.amount <= 1">-</button>
            <text>{{ item.amount }}</text>
            <button @click="zengjia(item.id,item.price)">+</button>
          </view>
        </view>
		<button @click="del(item.id)">删除</button>
      </view>
    </view>
    <!-- 底部结算栏 -->
    <view class="cart-footer">
      <!-- 全选框 -->
      <view class="footer-checkbox">
        <checkbox :checked="isAllSelected" @change="toggleAllSelection" />
        <text>全选</text>
      </view>
      <!-- 总价显示 -->
      <text class="total-price">总价: ￥{{ totalPrice }}</text>
      <!-- 结算按钮 -->
      <button @click="checkout" :disabled="!hasSelectedItems" class="checkout-btn">结算</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { getCartList,delCart,addCart } from '../../api/cart';
import {
    onLoad,
    onShow
} from "@dcloudio/uni-app"
let totalPrice=ref(0)

// 删除
async function del(id){
	let r4=await delCart(id);
	console.log(r4.data);
	huoquData()
}

// 获取购物车数据
const cartList = ref([]);
async function huoquData(){
	let r1=await getCartList();
	console.log(r1.data.data);
	cartList.value=r1.data.data
}
// 计算总价

onShow(()=>{
	huoquData()
})

async function jiaoshao(id,price){
	console.log("减少");
	// let r2= await addCart(id,-1,price)
	// console.log(r2);
}
async function zengjia(id,price){
	// console.log("增加");
	// let r3= await addCart(id,1,price)
	// console.log(r3);
	
}



</script>

<style scoped>
.cart-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 60px; /* 为底部结算栏留出空间 */
}

.cart-list {
  margin-top: 10px;
  background-color: #fff;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.item-checkbox {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden;
}

.item-image image {
  width: 100%;
  height: 100%;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name {
  font-size: 15px;
  color: #333;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-price {
  font-size: 16px;
  color: #f2270c;
  margin-right: 10px;
}

.quantity-control {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.quantity-control button {
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  margin: 0 5px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
}

.cart-footer {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

.footer-checkbox {
  display: flex;
  align-items: center;
}

.total-price {
  font-size: 16px;
  color: #f2270c;
  font-weight: bold;
  margin-left: 140px;
}

.checkout-btn {
  background-color: #f2270c;
  color: #fff;
  padding: 8px 20px;
  border-radius: 5px;
  font-size: 15px;
}

.checkout-btn[disabled] {
  background-color: #ccc;
}
</style>